import _ from 'lodash'
import { Button, Space } from 'antd'

import { TextAreaFilter } from '@/components/TextAreaFilter'
import { defaultParams, useBoundStore } from './store'

export const Filter = () => {
  const reqData = useBoundStore(v => v.reqData)
  const setReqData = useBoundStore(v => v.setReqData)
  const getData = useBoundStore(v => v.getData)

  const handleQuery = () => {
    setReqData({ page: 1 })
    getData(true)
  }

  return (
    <Space wrap>
      <Space size={4}>
        运单号
        <TextAreaFilter
          placeholder="请输入运单号"
          textAreaPlaceholder="多个运单号请换行"
          value={reqData.waybillNos}
          onChange={waybillNos => setReqData({ waybillNos })}
        />
      </Space>
      <Space>
        <Space size={4}>
          <Button
            onClick={() => {
              setReqData({ ..._.omit(defaultParams, ['size']), page: 1 })
              getData(true)
            }}
          >
            重置
          </Button>
          <Button type="primary" onClick={handleQuery}>
            查询
          </Button>
        </Space>
      </Space>
    </Space>
  )
}
